<script setup lang="ts">
import { useThemeStore } from '@/stores/common';

const themeStore = useThemeStore();

defineProps({
  src: {
    type: String,
    default: '',
  },
  dark: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '',
  },
  height: {
    type: String,
    default: '',
  },
});
</script>

<template>
  <picture class="picture-switch" :style="{ '--width': width ? width + 'px' : undefined, '--height': height ? height + 'px' : undefined }">
    <source :srcset="dark" v-if="themeStore.theme === 'dark'" />
    <img :src="src" alt="" v-if="src" />
    <slot v-else></slot>
  </picture>
</template>

<style scoped lang="scss">
.picture-switch {
  img {
    width: var(--width, 100%);
    height: 100%;
  }
}
</style>
